<template>
  <div class="about">
    <button @click="back()"><i class="el-icon-arrow-left"></i></button>
    <h1>确认订单</h1>
    <ul>
      <li v-for="item in arr" :key="item.di">
        <div>
          <img :src="item.img" /><span>{{ item.goods }}</span
          ><span>{{ item.price | money }}</span>
          <button>
            <i class="el-icon-minus"></i></button
          ><input class="number" type="text" :value="item.num" /><button>
            <i class="el-icon-plus"></i>
          </button>
        </div>
      </li>
    </ul>
    <div>
      <span>商品金额</span><span>{{ rel }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    this.arr = JSON.parse(localStorage.getItem("arr"));
  },
  methods: {
    back(){
      this.$router.back()
    }
  },
  filters: {
    money(a) {
      return "￥" + a;
    },
  },
  computed: {
    rel() {
      var num = 0;
      this.arr.forEach((item) => {
        num += item.num * item.price;
      });
      return num;
    },
  },
};
</script>
<style lang='less' scoped>
.number {
  width: 20px;
}
</style>